<template>
  <div class="mine-wrap">

    <div class="mine-wrap-header">
      <div class="user-info-box">
        <img class="user-img" src="~@/assets/imgs/logo.png" alt="">
        <p class="user-phone">{{ user.phone }}</p>
      </div>
      <div class="logout" @click="appAction('logout')"/>
      <div class="personal-info">
        <div class="personal-info-title">Personal Information</div>
        <div class="check" data-name="info" v-show="isShowPersonalInfo">
          <doFaceButton text="Finish it" source="mine_loan"/>
        </div>
        <div class="completed" v-show="!isShowPersonalInfo">Completed</div>
      </div>
    </div>
    <div class="wrap-list">

      <div class="list-item" @click="returnTo" data-name="bankCard">
        <div data-name="bankCard">
          <img src="~@/assets/imgs/home/mine_bank_card.png" alt="" data-name="bankCard">
          <div>Bank Card</div>
        </div>
      </div>
      <div class="list-item" @click="appAction('changepassword')">
        <div>
          <img src="~@/assets/imgs/home/mine_change_pwd.png" alt="">
          <div>Change Password</div>
        </div>
      </div>
      <div class="list-item" @click="returnTo" data-name="help">
        <div data-name="help">
          <img src="~@/assets/imgs/home/mine_help.png" alt="" data-name="help">
          <div>Loan super Help Center</div>
        </div>
      </div>
      <div class="list-item" @click="returnTo" data-name="terms">
        <div data-name="terms">
          <img src="~@/assets/imgs/home/mine_terms.png" alt="" data-name="terms">
          <div>Terms</div>
        </div>
      </div>
      <div class="list-item" @click="showPhoneDialog = true">
        <div>
          <img src="~@/assets/imgs/home/mine_online_services.png" alt="">
          <div>Online Services</div>
        </div>
      </div>

      <div class="list-item" @click="returnTo" data-name="about">
        <div data-name="about">
          <img src="~@/assets/imgs/home/mine_about.png" alt="" data-name="about">
          <div>About</div>
        </div>
      </div>

      <div class="list-item" @click="appAction('logout')" v-if="false">
        <div>
          <img src="~@/assets/imgs/home/mine_logout.png" alt="">
          <div>Log out</div>
        </div>
        <img src="~@/assets/imgs/home/icon_right.png" alt="">
      </div>
    </div>
    <van-dialog v-model:show="showPhoneDialog" confirm-button-color="#EC5958" :show-cancel-button="false"
      :show-confirm-button="true" confirm-button-text="I know" closeOnClickOverlay>
      <div class="mine-dialog">
        <p class="title">Online Services</p>
        <p class="phone"><span>Call Phone:</span>{{ appInfo.tel }}</p>
        <p class="email"><span>Mail:</span>{{ appInfo.email }}</p>
      </div>
    </van-dialog>
  </div>
</template>
<script>
// import Hybrid from '@/components/uzone-hybrid';
import { Dialog } from 'vant'
import doFaceButton from '@/components/doFaceButton';

export default {
  name: 'MINE',
  components: {
    [Dialog.Component.name]: Dialog.Component,
    doFaceButton
  },
  data() {
    return {
      isShowPersonalInfo: false,
      information: null,
      showPhoneDialog: false,
      user: {},
      appInfo: {
        tel: '',
        email: ''
      }
    };
  },
  methods: {
    appAction(type) {
      if (type == 'onlineServices') {
        this.$hybrid.action('callphone', { param: { phone: 4008208820 } });
      } else {
        if (type == 'logout') {
          // const hybrid = new Hybrid(this.$os.android ? 'android' : 'ios');
          this.$hybrid.action('logout', {
            callback(data) {
            }
          })
        } else {
          this.$hybrid.action(type)
        }
      }
    },
    getAppSeting() {
      this.$api.getServiceTelAndEmail().then(res => {
        let { data, status, error } = res;
        if (status == '1' && error == '00000000') {
          this.appInfo = data[0]
        }
      })
    },
    getUserInfoType() {
      this.$api.getDataIntegrity().then(res => {
        let { data, status, error } = res;
        if (status == '1' && error == '00000000') {
          //填资完成
          this.information = data
          if (data.USERBASEINFO == '1' && data.USERPERSONALINFO == '1' && data.USERJOB == '1' && data.USERCONTACT == '1' && data.USERCARDID == '1') {
            this.isShowPersonalInfo = false
          } else {
            this.isShowPersonalInfo = true
          }
        }

      })
    },
    returnToInfo() {
      let url = '';
      if (this.information.USERBASEINFO != 1) {
        url = '/information/identity';
      } else if (this.information.USERPERSONALINFO != 1) {
        url = '/information/personal';
      } else if (this.information.USERJOB != 1) {
        url = '/information/work';
      } else if (this.information.USERCONTACT != 1) {
        url = '/information/contact';
      } else if (this.information.USERCARDID != 1) {
        url = '/information/additional';
      }
      this.$router.push(url)
    },
    returnTo(e) {
      let name = e.target.dataset.name;
      console.warn(e, 'dasd')

      if (name == 'about') {
        this.$router.push('/aboutList')
      }
      ;
      if (name == 'bankCard') {
        this.$router.push('/account')
      }
      ;
      if (name == 'info') {
        this.$router.push('/information/identity')
      }
      ;
      if (name == 'help') {
        this.$router.push('/help')
      }
      ;
      if (name == 'terms') {
        this.$router.push('/agreement/minePrivacy')
      }
    }
  },
  created() {
    let user = this.$storage.get('user');
    var ary = user.phone.split("");
    ary.splice(3, 4, "****");
    var phone = ary.join("")
    user.phone = phone;
    this.user = user;
    this.getUserInfoType();
    this.getAppSeting();
  },
}
</script>
<style lang="scss">
@import './index.scss';
</style>